<template>
  <div class="login-container">
    <div class="login">
      <div class="left">
        <img class="img" src="../assets/login/Mask group.jpg" alt="" />
      </div>
      <div class="right">
        <h3>{{title}}</h3>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <el-form-item prop="account" label="账户">
            <el-input v-model="loginForm.account" />
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input :type="iso" v-model="loginForm.password" class="inp" />
            <span class="el-icon-view" @click="hid()"></span>
          </el-form-item>
          <el-form-item>
            <el-button class="actipon" @click.prevent="hLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/login";
import {dispatch} from '@/api/limits'
import arrayToTree from "array-to-tree";
import store from '@/store'
export default {
  data() {
    return {
      add:[],
      user:'',
      title:'营昕居后台管理系统',
      loginForm: {
        account: "",
        password: "",
      },
      iso: "password",
      loginRules: {
        account: [
          {
            required: true,
            message: "账号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
created(){
  document.title = this.title
  // remove删除 set存 get获取
     this.$cookies.remove('re-token');
      //  this.$cookies.remove('title')
     this.$cookies.set('title',this.title)
   this.loachendes()
},
  methods: {
      loachendes(){
              // 刚进页面刷新一下
    // if(location.href.indexOf("#reloaded") !=-1){
    //     location.href=location.href+"#reloaded";
    //     location.reload();
    // }
     store.state.token = ''
    },
    
    hid() {
      if (this.iso == "password") {
        this.iso = "text";
      } else {
        this.iso = "password";
      }
    },
    // 点击登录
    hLogin() {
         
    let geturl = window.location.href 
      this.user = geturl.substring(geturl.length - 3)
        this.$cookies.set("name", this.user);

      this.$refs.loginForm.validate((valid) => {
        if (!valid) return;
        this.doLogin();
      });
    },
    async doLogin() {
      try {
        const res = await login(this.loginForm);
        // console.log('获取到的token是', res.data)
        this.$message.success(res.msg);
             if(res.data == null){
        this.$message.error('账号或密码错误');
           
        }
          // this.$router.push('/home/dashboard/index')
      else if (res.code == 200) {
          this.$store.commit("sstok", res.data);
          // sessionStorage.setItem('token', JSON.stringify(res.data))
        const ress = await dispatch()
       for(let i = 0; i < ress.data.length; i++){
    this.add.push({
      name:ress.data[i].name,
      path:ress.data[i].routerPath,
      parentId:ress.data[i].parentId,
      id:ress.data[i].id,
      order:ress.data[i].order
    })
   }
   const treedata = arrayToTree(this.add,{
    parentProperty:"parentId",
    customID:"id"
   })
   this.add = treedata
   this.add = this.add.sort((a,b) => a.order - b.order)
        for(let i = 0; i < this.add.length; i++){
    this.add[i].children = this.add[i].children.sort((c,d) => c.order - d.order)
   }
          this.$router.push(
          this.$route.query.return_url || `/home/${this.add[0].path}/${this.add[0].children[0].path}`
          );

          // sessionStorage.setItem('name', JSON.stringify(this.loginForm.account))
        }
      } catch (err) {
        this.$message.error(err.msg);
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  width: 99vw;
  height: 98vh;
  background-image: url('../assets/login/image11.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login {
  width: 700px;
  height: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
}
.left {
  float: left;
}
.img {
  width: 300px;
  height: 350px;
  border-radius: 17px 0 0 17px;
}
.right {
  float: right;
  width: 400px;
  height: 250px;
  background-color: #fff;
  border-radius: 0 15px 15px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 50px 0 50px 0;
}
.actipon {
  width: 225px;
  height: 40px;
  background-color: #ff7144;
   border: 1px solid #ff7144;
  border-radius: 5px;
  margin: 0 0 20px 50px;
  color: #fff;
}
.actipon:hover {
  
  background-color: #ff7144;
  color: #fff;
}
.actipon:focus {
  background-color: #ff7144;
    border: 1px solid #ff7144;
  color: #fff;
}
.box {
  width: 252px;
  height: 36px;
  position: relative;
}
/* input{
		width: 200px;height: 30px;
		border: 2px solid #e3e5e8;
		border-radius: 3px;
		float: right;
	} */
/* .inp{
		position: absolute;
		right: 0;
		bottom: 6px;
	} */
.el-icon-view {
  position: absolute;
  top: 40%;
  right: 10%;
}
h3 {
  transform: translateY(-100%);
}
.el-form {
  width: 70%;
}
.el-form-item {
  width: 100%;
}
.el-input {
  width: 80%;
}
::v-deep .el-form-item__error{
   position: absolute;
   left: 55px !important;
}
</style>
